<?php
include 'functions.php';
?>
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title> reflection </title>
		<link rel="stylesheet" type="text/css" href="css/styles.css" />
		<link rel="stylesheet" type="text/css" href="css/default.css" />
		<link rel="stylesheet" type="text/css" href="css/component.css" />
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
		<script type="text/javascript">
			function resizeTextarea(id) {
				var a = document.getElementById(id);
				a.style.height = 'auto';
				a.style.height = a.scrollHeight + 'px';
			}

			function init() {
				var a = document.getElementsByTagName('textarea');
				for (var i = 0, inb = a.length; i < inb; i++) {
					if (a[i].getAttribute('data-resizable') == 'true')
						resizeTextarea(a[i].id);
				}
			}

			addEventListener('DOMContentLoaded', init);
		</script>
	</head>
	<body>
		<header></header>

		<form id="wholeForm" action="parse_reflection.php" method="post" class="nl-form">
			<div id="dynamicForm1" class="nl-form hidden">
				<select>
					<?php $getGReflection = getGReflection(1, 1); ?>
				</select>
				<select>
					<?php $getGReflection = getGReflection(1, 2); ?>
				</select>
				<textarea id="dynamicForm1_text" rows="1" placeholder="is" class="" onkeyup="resizeTextarea('dynamicForm1_text')"  data-resizable="true"></textarea>
			</div>

			<div id="dynamicForm2" class="nl-form hidden">
				<select>
					<?php $getGReflection = getGReflection(2, 1); ?>
				</select>
				<select>
					<?php $getGReflection = getGReflection(2, 2); ?>
				</select>
				<textarea id="dynamicForm2_text" rows="1" placeholder="type here" class="" onkeyup="resizeTextarea('dynamicForm2_text')"  data-resizable="true"></textarea>
			</div>

			<div id="dynamicForm3" class="nl-form hidden">
				<select>
					<?php $getGReflection = getGReflection(3, 1); ?>
				</select>
				<select>
					<?php $getGReflection = getGReflection(3, 2); ?>
				</select>
				<select>
					<?php $getGReflection = getGReflection(3, 3); ?>
				</select>
				<textarea id="dynamicForm3_text" rows="1" placeholder="type here"  class="" onkeyup="resizeTextarea('dynamicForm3_text')"  data-resizable="true"></textarea>
			</div>

			<div id="outcomeForm1" class="nl-form outcome hidden">
				<select>
					<?php $getGOutcome = getGOutcome(1, 1); ?>
				</select>
				<textarea id="outcomeForm1_text" rows="1" placeholder="type here"  class="" onkeyup="resizeTextarea('outcomeForm1_text')"  data-resizable="true"></textarea>
				<select>
					<?php $getGOutcome = getGOutcome(1, 2); ?>
				</select>
				<textarea id="outcomeForm1_text2" rows="1" placeholder="type here"  class="" onkeyup="resizeTextarea('outcomeForm1_text2')"  data-resizable="true"></textarea>
			</div>

			<div id="outcomeForm2" class="nl-form outcome hidden">
				<select>
					<?php $getGOutcome = getGOutcome(2, 1); ?>
				</select>
				<select>
					<?php $getGOutcome = getGOutcome(2, 2); ?>
				</select>
				<textarea id="outcomeForm2_text" rows="1" placeholder="type here"  class="nl-form" onkeyup="resizeTextarea('outcomeForm2_text')"  data-resizable="true"></textarea>
			</div>

			<div id="outcomeForm3" class="nl-form outcome hidden">
				<select>
					<?php $getGOutcome = getGOutcome(3, 1); ?>
				</select>
				<textarea id="outcomeForm3_text" rows="1" placeholder="type here"  class="nl-form" onkeyup="resizeTextarea('outcomeForm3_text')"  data-resizable="true"></textarea>
				<select>
					<?php $getGOutcome = getGOutcome(3, 2); ?>
				</select>
				<textarea id="outcomeForm4_text" rows="1" placeholder="type here"  class="nl-form" onkeyup="resizeTextarea('outcomeForm4_tex')"  data-resizable="true"></textarea>
			</div>

			<div class="nl-submit-wrap">
				<button class="nl-submit" type="submit" id="wfs">
					Save
				</button>
			</div>
			
		</form>
<div class="nl-overlay"></div>
		<input onclick="toggleHelp(this.value,this.id)" type="button" value="Hide help" id="helpReflect" />
		<input onclick="spinPt1()" type="button" value="spin ref" id="spinHelp" />
		<input onclick="spinPt2()" type="button" value="spin outcome" id="spinHelpOutcome" />
		<input onclick="refresher()" type="button" value="refresher" id="refresher" />
		<footer></footer>
		<script src="js/nlform.js"></script>

		<script>
			var nlform = new NLForm(document.getElementById('wholeForm'));
		</script>
		<script type="text/javascript">
			// get the start of the form name so a random number can be appended
			var formname = "dynamicForm";
			var outcomeForm = "outcomeForm";

			//choose a random number between 1 and 5
			var randNo1 = Math.floor((Math.random() * 3) + 1);
			var randNo2 = Math.floor((Math.random() * 3) + 1);

			//make the full form name
			//var chosenform = formname.concat(formno);
			var chosenform = formname.concat(randNo1);
			var chosenOutcomeForm = outcomeForm.concat(randNo2);

			//show me
			//window.alert(chosenOutcomeForm)
			//window.alert(chosenform)
			//set the visbility of the chosen form to visible
			document.getElementById(chosenform).className = "nl-form visible";
			document.getElementById(chosenOutcomeForm).className = "nl-form outcome visible";

			var x = document.getElementById(chosenform);
			var y = x.getElementsByTagName("*");
			var i;
			for ( i = 0; i < y.length; i++) {
				y[i].setAttribute("name", "formData[]");
			}

			var x1 = document.getElementById(chosenOutcomeForm);
			var y1 = x1.getElementsByTagName("*");
			var i;
			for ( i = 0; i < y1.length; i++) {
				y1[i].setAttribute("name", "formData[]");
			}

			function toggleHelp(myVal, btId) {

				if (myVal == "Hide help") {

					document.getElementById(chosenform).className = "nl-form hidden";
					document.getElementById(chosenOutcomeForm).className = "nl-form outcome hidden";
					document.getElementById(btId).value = "Show help";
				} else {
					document.getElementById(chosenOutcomeForm).className = "nl-form outcome visible";
					document.getElementById(btId).value = "Hide help";
				}
			}

			function spinPt1() {
				var current = document.getElementsByClassName("nl-form visible")[0].getAttribute("id");
				var lastChar = current.substr(current.length - 1);
				var values = [1, 2, 3];
				values = Array.filter(values, function(x) {
					return x != lastChar;
				});
				var rando = values[Math.floor(Math.random() * values.length)];
				var r = confirm("Are you sure?");
				if (r == true) {
					var elem = document.getElementById(current)
					console.log(elem)
					var names = elem.getElementsByTagName('*')
					console.log(names)
					for (var i = 0; i < names.length; i++) {
						names[i].setAttribute("name", "");
					}
					var nextform = chosenform.concat(rando);
					var x = document.getElementsByClassName("nl-form visible");
					var i;
					for ( i = 0; i < x.length; i++) {
						x[i].setAttribute("class", "nl-form hidden");
					}
					var nextform = formname.concat(rando);
					console.log(current + "  " + nextform);
					document.getElementById(nextform).className = "nl-form visible";
					var x = document.getElementById(nextform);
					var y = x.getElementsByTagName("*");
					for ( i = 0; i < y.length; i++) {
						y[i].setAttribute("name", "formData[]");
					}
				} else {
					return
				}
			}

			function spinPt2() {
				var current = document.getElementsByClassName("nl-form outcome visible")[0].getAttribute("id");
				var lastChar = current.substr(current.length - 1);
				var values = [1, 2, 3];
				values = Array.filter(values, function(x) {
					return x != lastChar;
				});
				var rando = values[Math.floor(Math.random() * values.length)];
				var r = confirm("Are you sure?");
				if (r == true) {
					var elem = document.getElementById(current)
					console.log(elem)
					var names = elem.getElementsByTagName('*')
					console.log(names)
					for (var i = 0; i < names.length; i++) {
						names[i].setAttribute("name", "");
					}
					var nextform = chosenOutcomeForm.concat(rando);
					var x = document.getElementsByClassName("nl-form outcome visible");
					var i;
					for ( i = 0; i < x.length; i++) {
						x[i].setAttribute("class", "nl-form hidden");
					}
					var nextform = outcomeForm.concat(rando);
					console.log(current + "  " + nextform);
					document.getElementById(nextform).className = "nl-form outcome visible";
					var x = document.getElementById(nextform);
					var y = x.getElementsByTagName("*");
					for ( i = 0; i < y.length; i++) {
						y[i].setAttribute("name", "formData[]");
					}
				} else {
					return
				}
			}

			function refresher() {
				location.reload();
			}

		</script>
	</body>
</html>